@import bourbon
@import media-queries
@import jquery.gritter
@import normalize
@import font-awesome
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700)

// sprite
@import symbols

@import variables
@import layout
@import typography
// components
@import spinner
@import canvas
@import symbol-list
// uniques
@import navigation

#classify--ad, #symbols--ad
  +left-column
  margin-left: -$outer-padding
  text-align: center

// Classify
#classify header
  +left-column
  margin-bottom: $default-margin/2
  nav
    float: right
  h1, nav
    margin: 0

#classify--canvas-area
  +left-column

#classify--hits
  +right-column

#classify--info-area
  +left-column

#showmore
  text-align: center

// Symbols
#symbols header
  +left-column
  margin-bottom: $default-margin/2
  nav
    float: right
  h1, h2, nav
    margin: 0

#symbols--fixer
  +left-column
  margin: 0

#symbols--info-area
  +right-column

#symbols--list-area
  +left-column

#symbols--loading
  .classifying &
    display: block
  text-align: center
  .spinner
    margin-right: $default-margin/2
    display: inline-block
    vertical-align: middle

#symbols--controls
  margin-bottom: $default-margin
  #filter
    margin-top: $default-margin/4
    input
      width: 140px

/*** Infoarea ***/

.donate-buttons
  width: 100%
  display: table
.paypal, .flattr, .gratipay
  height: 26px
  display: table-cell
  vertical-align: middle
  text-align: center

#donate
  color: gray
  font-size: rem(12)
  text-align: center
  h3
    font-weight: normal
    font-style: normal
    font-size: rem(18)
    margin: $default-margin/2 0
  p
    text-align: center
    font-size: rem(11)
    color: gray
    margin: $default-margin/2 0

div#sponsors
  margin-top: 30px

div#sponsors ul, div#sponsors ul li
  margin-left: 0
  padding-left: 0
  list-style: none
  text-align: center

// Hits
#hits--loading
  display: none
  .classifying &
    display: block
  text-align: center
  .spinner
    margin-right: $default-margin/2
    display: inline-block
    vertical-align: middle

#hits--loaded
  display: none
  .classified &
    display: block
